<template>
  <el-container>
    <el-header>
      <div class="sysParamsHeader">属性设置</div>
    </el-header>
    <el-main>
      <el-row class="pubSysParamsList container">
        <el-col style="margin-right:10px;" class="content-left">
          <!-- 按钮与搜索 -->
          <el-row class="handleBox">
            <!-- 左侧按钮 -->
            <el-col :span="24">
              <el-button @click="saveAll">保存</el-button>
            </el-col>
          </el-row>
        </el-col>
        <!-- 表单  -->
        <el-col>
          <el-form
            :model="saveForm"
            ref="saveOrEditRef"
            label-width="0px"
            :status-icon="true"
            :rules="saveFormRules"
          >
            <table class="table" cellpadding="0" cellspacing="0" border="1">
              <thead class="thead">
                <tr>
                  <td width="50px">序号</td>
                  <td width="300px">属性名</td>
                  <td width="300px">属性值</td>
                  <td width="220px">默认值</td>
                  <td width="100px">是否启用</td>
                  <td width="100px">操作</td>
                </tr>
              </thead>
              <tbody class="tbody">
                <!--As of Date-->
                <tr>
                  <td>1</td>
                  <td>数据日期</td>
                  <td>
                    <el-form-item prop="asOfDate">
                      <el-date-picker v-model="saveForm.asOfDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择日期"></el-date-picker>
                    </el-form-item>
                  </td>
                  <td id="asOfDateValue" style="text-align: left;">
                    <el-input :value="deauftData.asOfDateValue" :disabled="true"></el-input>
                  </td>
                  <td align="center">
                    <el-checkbox v-model="saveForm.asOfDateboxHi" true-label="1" disabled></el-checkbox>
                  </td>
                  <td>
                    <el-link @click="resetParam('123456781')" style="color:blue">恢复默认</el-link>
                  </td>
                </tr>

                <!--Default Total Error Message Limit  -->
                <!-- <tr>
                  <td>2</td>
                  <td>错误日志记录数</td>
                  <td>
                    <el-form-item prop="errorMessage">
                      <el-input
                        v-model="saveForm.errorMessage"
                        style="width:220px;"
                        placeholder="请输入值"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td>
                    <el-input :value="deauftData.errorMessageValue" :disabled="true"></el-input>
                  </td>
                  <td align="center">
                    <el-checkbox
                      v-model="deauftData.errorMessageboxHi"
                      true-label="1"
                      false-label="0"
                    ></el-checkbox>
                  </td>
                  <td>
                    <el-link @click="resetParam('123456782')" style="color:blue">恢复默认</el-link>
                  </td>
                </tr> -->

                <!--Default Error Message Limit Per Item-->
                <!-- <tr>
                  <td>3</td>
                  <td>日志文件大小</td>
                  <td>
                    <el-form-item prop="perItem">
                      <el-input v-model="saveForm.perItem" style="width:220px;" placeholder="请输入值"></el-input>
                    </el-form-item>
                  </td>
                  <td id="perItemValue">
                    <el-input :value="deauftData.perItemValue" disabled></el-input>
                  </td>
                  <td align="center">
                    <el-checkbox v-model="saveForm.perItemboxHi" true-label="1" false-label="0"></el-checkbox>
                  </td>
                  <td>
                    <el-link @click="resetParam('123456783')" style="color:blue">恢复默认</el-link>
                  </td>
                </tr> -->

                <!-- Debugging Output Level-->
                <!-- <tr>
                  <td>4</td>
                  <td>Debugging输出的方式</td>
                  <td>
                    <el-form-item prop="outputLevel">
                    <el-select v-model="saveForm.outputLevel" style="width:220px;">
                      <el-option
                        v-for="item in sys_cfg_errorType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                    </el-form-item>
                  </td>
                  <td id="outputLevelValue" style="text-align: left;">
                    <el-select :value="deauftData.outputLevelValue" disabled style="width:220px;">
                      <el-option
                        v-for="item in sys_cfg_errorType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </td>
                  <td align="center">
                    <el-checkbox v-model="saveForm.outputLevelboxHi" true-label="1" false-label="0"></el-checkbox>
                  </td>
                  <td>
                    <el-link @click="resetParam('123456784')" style="color:blue">恢复默认</el-link>
                  </td>
                </tr> -->

                <!--Maximum circular allocation iterations -->

                <!-- Show  Type -->
                <tr>
                  <td>2</td>
                  <td>展现方式</td>
                  <td>
                     <el-form-item prop="showType">
                    <el-select v-model="saveForm.showType" style="width:220px;">
                      <el-option
                        v-for="item in sys_cfg_type"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                    </el-form-item>
                  </td>
                  <td id="showTypeValue" style="text-align: left;">
                    <el-select :value="deauftData.showTypeValue" disabled style="width:220px;">
                      <el-option
                        v-for="item in sys_cfg_type"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </td>
                  <td align="center">
                    <el-checkbox v-model="saveForm.showTypeboxHi" true-label="1" false-label="0"></el-checkbox>
                  </td>
                  <td>
                    <el-link @click="resetParam('123456786')" style="color:blue">恢复默认</el-link>
                  </td>
                </tr>

                <!-- Show Level -->
                <tr>
                  <td>3</td>
                  <td>展现层级</td>
                  <td>
                     <el-form-item prop="showLevel">
                    <el-select v-model="saveForm.showLevel" style="width:220px;">
                      <el-option
                        v-for="item in sys_cfg_level"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                    </el-form-item>
                  </td>
                  <td id="showLevelValue" style="text-align: left;">
                    <el-select :value="deauftData.showLevelValue" disabled style="width:220px;">
                      <el-option
                        v-for="item in sys_cfg_level"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </td>
                  <td align="center">
                    <el-checkbox v-model="saveForm.showLevelboxHi" true-label="1" false-label="0" />
                  </td>
                  <td>
                    <el-link @click="resetParam('123456787')" style="color:blue">恢复默认</el-link>
                  </td>
                </tr>

                <!-- fieldName -->
                <tr>
                  <td>4</td>
                  <td>自定义表名前缀</td>
                  <td>
                    <el-form-item prop="fieldName">
                      <el-input v-model="saveForm.fieldName" style="width:220px;" maxlength="20"></el-input>
                    </el-form-item>
                  </td>
                  <td id="fieldNameValue" style="text-align: left;">
                    <el-input :value="deauftData.fieldNameValue" disabled></el-input>
                  </td>
                  <td align="center">
                    <el-checkbox v-model="saveForm.fieldNameboxHi" true-label="1" false-label="0" disabled />
                  </td>
                  <td>
                    <el-link @click="resetParam('123456788')" style="color:blue">恢复默认</el-link>
                  </td>
                </tr>

                <tr>
                  <td>5</td>
                  <td>
                    EXCEL导出最大数
                    <span style="color: red">(最大值为20,000)</span>
                  </td>
                  <td>
                    <el-form-item prop="exportMaxNum">
                      <el-input-number
                        style="width:220px;"
                        v-model="saveForm.exportMaxNum"
                        :max="20000"
                        :min="1"
                      ></el-input-number>
                    </el-form-item>
                  </td>
                  <td id="exportMaxNumValue">
                    <el-input :value="deauftData.exportMaxNumValue" disabled></el-input>
                  </td>
                  <td align="center">
                    <el-checkbox
                      v-model="saveForm.exportMaxNumboxHi"
                      true-label="1"
                      false-label="0"
                    />
                  </td>
                  <td>
                    <el-link @click="resetParam('123456789')" style="color:blue">恢复默认</el-link>
                  </td>
                </tr>

                <tr>
                  <td>6</td>
                  <td>分摊误差补齐</td>
                  <td>
                      <el-form-item prop="isUsedDeviation">
                    <el-select v-model="saveForm.isUsedDeviation" style="width:220px;">
                      <el-option
                        v-for="item in sys_cfg_deviation"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                      </el-form-item>
                  </td>
                  <td id="isUsedDeviationValue" style="text-align: left;">
                    <el-select
                      :value="deauftData.isUsedDeviationValue"
                      disabled
                      style="width:220px;"
                    >
                      <el-option
                        v-for="item in sys_cfg_deviation"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </td>
                  <td align="center">
                    <el-checkbox
                      v-model="saveForm.isUsedDeviationboxHi"
                      true-label="1"
                      false-label="0"
                    />
                  </td>
                  <td>
                    <el-link @click="resetParam('123456791')" style="color:blue">恢复默认</el-link>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>


<script>
import onlyOneSearch from "@/components/onlyOneSearch";
import moment from "moment";
import { getDict } from "@/api/getDict";
import { pubSysparamList } from "@/api/index";
export default {
  data() {
    return {
      saveForm: {},
      saveFormRules: {
        asOfDate:[
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          }
        ],
        errorMessage: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          }
        ],
        perItem: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          }
        ],

        outputLevel: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          }
        ],

        showType: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          }
        ],
        showTypeboxHi: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          }
        ],
        showLevel: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          }
        ],
        fieldName: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          },
          {
            pattern: /^[A-Z]{1}[A-Z_]{1,3}$/g,
            message: "大写字母开头,不超过4位的大写英文字母和_的组合",
            trigger: "blur"
          }
        ],
        exportMaxNum: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          },
          {
            pattern: /^[0-9]+$/g,
            message: "只能输入整数",
            trigger: "blur"
          }
        ],
        exportMaxNumboxHi: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          }
        ],
        isUsedDeviation: [
          {
            required: true,
            message: "该输入项为必输项",
            trigger: "blur"
          }
        ]
      },
      deauftData: {},
      sys_cfg_errorType: [
        {
          label: "显示所有的SQL",
          value: "all"
        },
        {
          label: "不输出SQL日志文件",
          value: "notOutput"
        },
        {
          label: "显示显着的计算SQL",
          value: "Significant"
        }
      ],
      //       展现方式字典数据
      sys_cfg_type: [
        {
          label: "编码",
          value: "code"
        },
        {
          label: "名称（编码）",
          value: "nameCode"
        },
        {
          label: "名称",
          value: "name"
        }
      ],
      //展示层级字典
      sys_cfg_level: [
        {
          label: "一级",
          value: "1"
        },
        {
          label: "二级",
          value: "2"
        },
        {
          label: "三级",
          value: "3"
        },
        {
          label: "四级",
          value: "4"
        }
      ],
      //sys_cfg_deviation 分摊误差补齐字典
      sys_cfg_deviation: [
        {
          label: "是",
          value: "1"
        },
        {
          label: "否",
          value: "0"
        }
      ]
    };
  },
  created() {
    this.getDict();
    this.getshowTypeDict();
    this.getshoLevelDict();
    this.getUserDeviationDict();
    this.queryAll();
  },
  mounted() {},
  watch: {},
  methods: {
    getDict() {
      getDict("sys_cfg_errorType").then(res => {
        if (res.code == 200) {
          if (res.datas != "" && null != res.datas) {
            this.sys_cfg_errorType = res.datas;
          }
        }
      });
    },
    //获取展示方式字典
    getshowTypeDict() {
      getDict("sys_cfg_type").then(res => {
        if (res.code == 200) {
          if (res.datas != "" && null != res.datas) {
            this.sys_cfg_type = res.datas;
          }
        }
      });
    },
    //获取展示方式字典
    getshoLevelDict() {
      getDict("sys_cfg_level").then(res => {
        if (res.code == 200) {
          if (res.datas != "" && null != res.datas) {
            this.sys_cfg_level = res.datas;
          }
        }
      });
    },
    //获取误差字典
    getUserDeviationDict() {
      getDict("sys_cfg_deviation").then(res => {
        if (res.code == 200) {
          console.log(res.datas, "sys_cfg_deviation");
          if (res.datas != "" && null != res.datas) {
            this.sys_cfg_deviation = res.datas;
          }
        }
      });
    },
    queryAll() {
      pubSysparamList.queryAll().then(res => {
        if ((res.code = 200 && res.datas != null)) {
          let resutlData = res.datas;
          console.log(resutlData, "fanhuishuju");
          for (let i = 0; i < resutlData.length; i++) {
            if (resutlData[i].syscfgId == "123456781") {
              //数据日期
              let syscfgValue = resutlData[i].syscfgValue;
              this.$set(this.saveForm, "asOfDate", syscfgValue);
              this.$set(
                this.deauftData,
                "asOfDateValue",
                resutlData[i].defaultValue
              );
              this.$set(this.saveForm, "asOfDateboxHi", resutlData[i].isUsed);
            } else if (resutlData[i].syscfgId == "123456782") {
              //错误日志记录
              let syscfgValue = resutlData[i].syscfgValue;
              this.$set(this.saveForm, "errorMessage", syscfgValue);
              this.$set(
                this.deauftData,
                "errorMessageValue",
                resutlData[i].defaultValue
              );
              this.$set(
                this.saveForm,
                "errorMessageboxHi",
                resutlData[i].isUsed
              );
            } else if (resutlData[i].syscfgId == "123456783") {
              //日志文件大小
              let syscfgValue = resutlData[i].syscfgValue;
              this.$set(this.saveForm, "perItem", syscfgValue);
              this.$set(
                this.deauftData,
                "perItemValue",
                resutlData[i].defaultValue
              );
              this.$set(this.saveForm, "perItemboxHi", resutlData[i].isUsed);
            } else if (resutlData[i].syscfgId == "123456784") {
              //输出方式
              let syscfgValue = resutlData[i].syscfgValue;
              this.$set(this.saveForm, "outputLevel", syscfgValue);
              this.$set(
                this.deauftData,
                "outputLevelValue",
                resutlData[i].defaultValue
              );
              this.$set(
                this.saveForm,
                "outputLevelboxHi",
                resutlData[i].isUsed
              );
            } else if (resutlData[i].syscfgId == "123456786") {
              //展现方式
              let syscfgValue = resutlData[i].syscfgValue;
              this.$set(this.saveForm, "showType", syscfgValue);
              this.$set(
                this.deauftData,
                "showTypeValue",
                resutlData[i].defaultValue
              );
              this.$set(this.saveForm, "showTypeboxHi", resutlData[i].isUsed);
            } else if (resutlData[i].syscfgId == "123456787") {
              //展现层级
              let syscfgValue = resutlData[i].syscfgValue;
              this.$set(this.saveForm, "showLevel", syscfgValue);
              this.$set(
                this.deauftData,
                "showLevelValue",
                resutlData[i].defaultValue
              );
              this.$set(this.saveForm, "showLevelboxHi", resutlData[i].isUsed);
            } else if (resutlData[i].syscfgId == "123456788") {
              //表名前缀
              let syscfgValue = resutlData[i].syscfgValue;
              this.$set(this.saveForm, "fieldName", syscfgValue);
              this.$set(
                this.deauftData,
                "fieldNameValue",
                resutlData[i].defaultValue
              );
              this.$set(this.saveForm, "fieldNameboxHi", resutlData[i].isUsed);
            } else if (resutlData[i].syscfgId == "123456789") {
              //EXCEL导出最大数
              let syscfgValue = resutlData[i].syscfgValue;
              this.$set(this.saveForm, "exportMaxNum", syscfgValue);
              this.$set(
                this.deauftData,
                "exportMaxNumValue",
                resutlData[i].defaultValue
              );
              this.$set(
                this.saveForm,
                "exportMaxNumboxHi",
                resutlData[i].isUsed
              );
            } else if (resutlData[i].syscfgId == "123456791") {
              //分摊误差补齐
              let syscfgValue = resutlData[i].syscfgValue;
              this.$set(this.saveForm, "isUsedDeviation", syscfgValue);
              this.$set(
                this.deauftData,
                "isUsedDeviationValue",
                resutlData[i].defaultValue
              );
              this.$set(
                this.saveForm,
                "isUsedDeviationboxHi",
                resutlData[i].isUsed
              );
            }
          }
        }
      });
    },
    //重置参数值方法
    resetParam(val) {
      let resetCaData = { syscfgId: val };

      this.$confirm("您确定要恢复默认值吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          pubSysparamList.resetParamsData(resetCaData).then(res => {
            if (res.code == 200) {
              debugger;
              this.$message.success("恢复数据成功");
              this.queryAll();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消恢复"
          });
        });
    },
    //保存所有参数
    saveAll() {
      this.$refs.saveOrEditRef.validate(valid => {
        if (valid) {
          let saveData = this.saveForm;
          console.log(saveData,"公参保存的数据")
        
          pubSysparamList.savePubSyscfg(saveData).then(res => {
            if (res.code == 200) {
              if (res.data == "1") {
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message);
              }
              this.queryAll();
            }
          });
        }
      });
    }
  }
};
</script>


<style lang="scss"  scoped>
.capubsysparamrow {
  border: 1px solid black;
  /deep/ el-col {
    border: 1px solid black;
  }
}

.sysParamsHeader {
  font-size: 16px;
  font-weight: bold;
  line-height: 3;
}

.panel-title {
  padding: 30px 10px 6px 18px;
}

.table {
  width: 1000px;
  height: auto;
  border-collapse: collapse;
  color:#646464;
}
.thead td {
  border: 1px solid #eaeaea;
  height: 30px;
  padding-left: 12px;
  text-align: center;
  background: #ECF1FC;
  font-weight: bold;
  line-height: 2;
  font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif';
}
.table td {
  border: 1px solid #eaeaea;
  height: 30px;
  padding: 10px 10px 0px 10px;

  text-align: left;
  font-size: 12px;
  line-height: 2;
}
.table tr:hover {
  height: 30px;
  background-color: #e6f7ff;
}
</style>